<template>
  <div class="u-text-center myPages">
    <h2 style="margin: 50px">{{ dataInfo.productName }}</h2>
    <div class="box">
      <div>{{ dataInfo.productOutline }}</div>
      <div v-html="dataInfo.productIntro"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import homeApi from "@/api/home";
import { reactive } from "vue";
const dataInfo = reactive({});
homeApi.getByProductCodeDetails("scsa").then((res) => {
  console.log(res);

  Object.assign(dataInfo, res.data);
});
</script>

<style scoped>
.box {
  margin: 20px 40px;
  color: #888;
  background-color: #fff;
  box-shadow: 0 0 10px 0 #ebeaea;
  min-height: 380px;
  padding: 10px 80px 50px;
  transition: all 0.5s;
  line-height: 30px;
}
</style>